<template>
	<view class="formpanel">
		<form @submit="formSubmit">
			<view class="group border-tb">车辆信息</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>车牌号</view>
				<view class="text"><input name="CarNum" placeholder="请输入车牌号" placeholder-class="gray" @tap="CarnoTap" readonly="readonly" :value="Info.CarNum"></input></view>
				<!-- <view class="icon" @click="GetCarNum"><image src="/static/scancar.png" /></view> -->
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>车牌颜色</view>
				<view class="text">
					<picker @change="CarColorChange" :value="Tools.findStringIndex(CarColorList,Info.CarColor)" :range="CarColorList">
						<view class="uni-input">
							{{Info.CarColor}}<input name="CarColor" Stage="text" class="hidden" :value="Info.CarColor"/>
						</view>
					</picker>
				</view>
			</view>
			<view class="group border-tb">车主信息</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>您的身份</view>
				<view class="text">
					<radio-group name="PersonType" @change="PersonTypeChange">
						<label><view class="r1"><radio value="1" :checked="Info.PersonType==1?true:false" color="#3d7dfd" /></view><view class="r2">车主本人</view></label>
						<label><view class="r1"><radio value="0" :checked="Info.PersonType==0?true:false" color="#3d7dfd" /></view><view class="r2">非车主本人</view></label>
					</radio-group>
				</view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>车主姓名</view>
				<view class="text"><input name="RealName" type="text" placeholder="请输入车主姓名" placeholder-class="gray" :value="Info.RealName"></input></view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>车主身份证</view>
				<view class="text"><input name="IDCard" type="text" placeholder="请输入车主身份证" placeholder-class="gray" :value="Info.IDCard"></input></view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>车主住址</view>
				<view class="text"><input name="Address" type="text" placeholder="请输入车主住址" placeholder-class="gray" :value="Info.Address"></input></view>
			</view>
			<view class="cu-form-group border-b" v-if="Info.PersonType==0">
				<view class="title"><text>*</text>车主手机号</view>
				<view class="text"><input name="Mobile" type="number" placeholder="请输入车主手机号" placeholder-class="gray" :value="Info.Mobile"></input></view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>我的手机号</view>
				<view class="text"><input name="MyMobile" type="number" placeholder="请输入我的手机号" placeholder-class="gray" :value="Info.MyMobile"  @input="MyMobileInput"></input></view>
				<view class="smscode border-l" :class="TimeCount==60?'':'issend'" @click="Send_SmsCode()">{{TimeCount==60?'获取验证码':TimeCount+'秒'}}</view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title"><text>*</text>验证码</view>
				<view class="text"><input name="SmsCode" type="number" placeholder="请输入4位数验证码" placeholder-class="gray" value=""></input></view>
			</view>
			<view class="group border-tb">车主证件（行驶证/身份证<text class="red">2选1</text>）</view>
			<view class="cardlist border-b">
				<view class="card" @click="ChooseDriverImg" v-if="DriverImg==''"><image src="https://xipingzhifa.qiyedaishu.com/img/drivecard.png" /></view>
				<view class="card" @click="ChooseDriverImg" v-else><image :src="DriverImg" /></view>
				<view class="card" @click="ChooseIDCardImg" v-if="IDCardImg==''"><image src="https://xipingzhifa.qiyedaishu.com/img/idcard.png" /></view>
				<view class="card" @click="ChooseIDCardImg" v-else><image :src="IDCardImg" /></view>
			</view>
			<view>
				<iframe id="iframe" style="width:100%; height:300rpx; border:0rpx;" src="http://test.qiyedaishu.com/card.aspx" />
			</view>
			<view class="tip">温馨提示: 请准确填写车主信息，否则产生的一切法律后果由办理人承担</view>
			<view class="btn">
				<button class="publishs" form-type="submit">确定</button>
			</view>
		</form>
		<!-- 键盘 -->
		<maplemei-keyboard :show="Show" :value="Info.CarNum" @submit="CarnoSubmit" @close="Show = false" :defaultType="1"></maplemei-keyboard>
	</view> 
</template>

<script>
	var wx = require('jweixin-module')
	var timer
	import maplemeiKeyboard from '../../components/maplemei-keyboard/maplemei-keyboard.vue'
	export default {
		components: {
		    maplemeiKeyboard
		},
		data() {
			return {
				ID:0,
				Info:{ID:0, CarNum:'', MyMobile:''}, 
				DriverImg:'',
				IDCardImg:'',
				DriverServerID:'',
				IDCardServerID:'',
				CarColorList:[],
				Show:false,
				TimeCount:60
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.Find_MemberCarInfo();
			this.Util.Init_Wx(wx,"西平县城市管理局执法公众号","西平县城市管理局执法公众号","");
		},
		methods:{
			CarnoTap(){
				this.Show = true;
			},
			CarnoSubmit(val){
				this.Info.CarNum = val;
			},
			CarColorChange(e){
				this.Info.CarColor=this.CarColorList[e.detail.value];
			},
			PersonTypeChange(e){
				this.Info.PersonType = parseInt(e.detail.value);
			},
			MyMobileInput(e){
				this.Info.MyMobile = e.detail.value;
			},
			Find_MemberCarInfo(){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_MemberCarInfo";
				this.Util.Loading("加载中...");
				this.Util.Member(data, json=>{
					console.log(json);
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.DriverImg = this.Info.DriverImg;
					this.IDCardImg = this.Info.IDCardImg;
					this.CarColorList = json.Data.CarColorList;
				});
			},
			CountDown(){
				timer = setTimeout(item=>{
					this.TimeCount--;
					if(this.TimeCount==0){
						this.TimeCount=60;
						clearTimeout(timer);
					}else{
						this.CountDown();
					}
				},1000);
			},
			Send_SmsCode(){
				if(!this.Info.MyMobile || this.Info.MyMobile==""){
					this.Util.Toast("请输入您的手机号");
					return;
				}
				if(this.Info.MyMobile.length!=11){
					this.Util.Toast("手机号不正确");
					return;
				}
				if(this.TimeCount==60){
					var data = {};
					data.Act="Send_SmsCode";
					data.MyMobile=this.Info.MyMobile;
					this.Util.Loading("加载中...");
					this.Util.Member(data, json=>{
						this.CountDown();
						this.Util.HideLoading();
						this.Util.Toast(json.Msg);
					});
				}
			},
			ChooseDriverImg() {
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.DriverImg=res.localIds[0];
						this.Util.Loading("正在上传，请稍候...");
						this.SyncUpload(res.localIds[0], ServerID=>{
							this.DriverServerID = ServerID;
							this.Util.HideLoading();
						});
					}
				});
			},
			ChooseIDCardImg() {
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.IDCardImg=res.localIds[0];
						this.Util.Loading("正在上传，请稍候...");
						this.SyncUpload(res.localIds[0], ServerID=>{
							this.IDCardServerID = ServerID;
							this.Util.HideLoading();
						});
					}
				});
			},
			SyncUpload (localId, callback){
				wx.uploadImage({
					localId: localId,
					isShowProgressTips: 0,
					success: res=> {
						if(callback){callback(res.serverId);}
						
					}
				});
			},
			formSubmit(e){
				var data = e.detail.value;
				data.Act="Save_MemberCar";
				data.ID=this.ID;
				data.DriverImg = this.DriverImg;
				data.IDCardImg = this.IDCardImg;
				data.DriverServerID=this.DriverServerID;
				data.IDCardServerID=this.IDCardServerID;
				if(data.CarNum.Trim()==""){
					this.Util.Toast("请输入车牌号");
					return;
				}
				if(data.RealName.Trim()==""){
					this.Util.Toast("请输入车主姓名");
					return;
				}
				if(data.IDCard.Trim()==""){
					this.Util.Toast("请输入车主身份证");
					return;
				}
				if(data.Address.Trim()==""){
					this.Util.Toast("请输入车主住址");
					return;
				}
				if(data.PersonType=="0" && data.Mobile.Trim()==""){
					this.Util.Toast("请输入车主手机号");
					return;
				}
				if(data.MyMobile.Trim()==""){
					this.Util.Toast("请输入您的手机号");
					return;
				}
				if(data.SmsCode.Trim()==""){
					this.Util.Toast("请输入验证码");
					return;
				}
				if(this.DriverImg.Trim()=="" && this.IDCardImg.Trim()==""){
					this.Util.Toast("行驶证和身份证至少需要上传1个");
					return;
				}
				this.Util.Confirm("您确定要提交吗？",()=>{
					this.Util.Loading("请稍候...");
					this.Save(data);
				});
			},
			Save(data){
				this.Util.Member(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.Util.Toast(json.Msg, obj=>{
							uni.$emit("Success","");
							uni.navigateBack();
						});
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			}
		}
	}
	window.addEventListener('message', function (e) {
	            console.log(e);
	            var fun=e.data;
	            if(fun=="click"){
	                alert("aaa");    
	            };
	        });
</script>

<style lang="scss">
	.group{width:100%; height:80rpx; line-height: 80rpx; padding-left:30rpx; font-size:32rpx; margin-top:25rpx; color:#3d7dfd; background-color: #ffffff;
		.number{color:#000000; padding-right:30rpx; float:right;}
		.resign{color:#00c1a8; padding-right:30rpx; float:right;}
	}
	.title text{color:red;}
	label{width:auto; margin-right: 20rpx; display: flex; flex-direction: row; .r1{margin-top:-2rpx;}}
	.smscode{width:160rpx; height:60rpx; line-height: 60rpx; text-align: center; border-radius: 10rpx; background-color: #3d7dfd; color:#ffffff;}
	.issend{background-color: #bfbfbf; color:#f5f6f6;}
	radio{transform:scale(0.8);}
	.icon{width:60rpx; height:100rpx; image{border-radius:0rpx; width:60rpx; height: 60rpx; margin-top:20rpx;}}
	.line{font-size:34rpx; .datatime{color:#a9a8a8 !important;}}
	.imglist{width:100%; height:auto; padding-bottom: 20rpx; padding-left:30rpx; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: wrap;
		.img{width:150rpx; height:150rpx; position: relative; margin-left:30rpx; margin-bottom:20rpx;
			.delete{width:40rpx; height:40rpx; position:absolute; right:-15rpx; top:-15rpx;}
			image{width:100%; height: 100%; border-radius: 0rpx;}
		}
		.img:nth-child(4n-3){margin-left:0rpx;}
		.bd{border:1rpx solid #bfbfbf;}
	}
	.cardlist{width:100%; background-color: #ffffff; padding:25rpx; display: flex; flex-direction: row; justify-content: space-between;
		.card{width:340rpx; height: 250rpx; image{width:100%; height:100%;}}
		.card:active{opacity: 0.6;}
	}
	.tip{color:red; padding:20rpx;}
</style>
